<template>
    <div class="box">
        <Zong :puke="puke" :numpai="numpai"></Zong>
        <div class="play">
                <Player v-for="(item,index) in palyerlist" @click.native="test"
                :key="index"
                :text="item.name"
                :class="[item.sty,index ==id? 'actionc':'']"
                :isColor="item.isColor"
                :data-id = "index"
                ></Player>
            <GetPai @getID="getId(id)"
            class="getpai" 
                :id="id"></GetPai>
        </div>
    </div>
</template>

<script>
import GetPai from '../components/GetPai.vue';
import Zong from '../components/Zong.vue';

export default {
    data() {
        return {
            puke: ["王", "王", "2", "A", "K", "Q", "J", "10", "9", "8", "7", "6", "5", "4"],
            palyerlist:[
                {name:"玩阿松大家",sty:"wanjia",isColor: false,},
                {name:"下家",sty:"xiajia",isColor: false,},
                {name:"下联",sty:"xialian",isColor: false,},
                {name:"对家",sty:"duijia",isColor: false,},
                {name:"上联",sty:"shanglian",isColor: false,},
                {name:"上家",sty:"shangjia",isColor: false,},
  
            ],
            id :0,
            numpai:0
        };
    },
    components: { Zong, GetPai },
    methods:{
        test(e){
            let id = e.currentTarget.dataset.id;
            this.id = id
        },
        getId(){
            if(this.palyerlist.length == Number(this.id)+1){
                this .id =0}
            else{
            this .id+=1
            }
        },
        getValue(vla){
            console.log(vla);
            this.numpai = vla
        }
    }
}
</script>

<style lang="less" scoped>
.actionc {
    border: 2px solid red;
}

.box {

    margin: 0 20px;

    .play {
        height: 530px;
        position: relative;
        background-color: cornflowerblue;

        .shangjia {
            position: absolute;
            top: 60%;
            left: 0;

        }

        .shanglian {
            position: absolute;
            top: 20%;
            left: 0;
        }

        .duijia {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -170px;
        }

        .xialian {
            position: absolute;
            top: 20%;
            right: 0;
        }

        .xiajia {
            position: absolute;
            top: 60%;
            right: 0;
        }

        .wanjia {
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -170px;
        }

        .getpai {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -60px 0 0 -250px;
        }
    }
}</style>